<template>
    <div>
        <mHeader :list="loginInfo"></mHeader>
        <div class="main-con">
            <div class="wrap-con">
                <div class="menu" v-popover:popover style="position: relative;">
                    <div v-for="item in menuList" :key="item.id">
                        <p>{{ item.name }}</p>
                        <div class="pdao" style="position: relative;" @mouseleave="showpopover = false"
                            @mouseover="getPinDao(item)">
                            <span @click="goPage('/searchHome', e.id)" v-for="(e, d) in item.second" :key="e.id"
                                class="titless" :style="{ whiteSpace: d < 5 ? 'nowrap' : '', display: 'inline-block' }">
                                {{ e.name }}
                                <span style="display: inline-block;width: 12px;text-align: center;">/</span>

                                <!-- <span v-if="indexs != (item.second.length - 1) && indexs<11">/</span> -->
                            </span>

                            <!-- <span @mouseleave="showpopover = false" @mouseover="getPinDao(item)"
                                style="position: absolute;right: 10px;bottom: 0;line-height: 20px;">
                                <span style="background-color: #1068E7;">...更多</span>
                            </span> -->


                        </div>
                    </div>
                    <div v-show="showpopover" class="HoverMenu" style="" @mouseover="showpopover = true"
                        @mouseleave="showpopover = false">
                        <p style="font-size: 24px;font-weight: bold;margin-bottom: 0.83rem;color: #000;">{{ pindao.name
                        }}
                        </p>
                        <div style="position:relative">
                            <span @click="goPage('/searchHome', i.id)" v-for="i in pindao.second" :key="i.id"
                                style="color: #000;cursor: pointer;font-size: 18px;line-height: 35px;padding: 3px;">
                                {{ i.name }}
                                <span style="display: inline-block;width: 6px;text-align: center;">/</span>
                                <!-- <span v-if="indexs != (item.second.length - 1) && indexs<11">/</span> -->
                            </span>
                        </div>
                    </div>
                </div>


                <div class="leftList">
                    <span class="line1" @click="gourl(item.url)" v-for="(item, index) in leftList" :key="index">{{
                        item.title }}</span>
                    <div class="phoneCode">
                        <p>{{ temp_title }}</p>
                        <img :src="main_logo" alt="">
                        <div class="links">
                            <span @click="goPage('/article', 2)">本站声明 / </span>
                            <span @click="goPage('/article', 3)">用户协议 / </span>
                            <span @click="goPage('/article', 4)">使用指南 /</span>
                            <span @click="goPage('/article', 5)">合作咨询 / </span>
                            <span @click="goPage('/article', 2)">意见反馈</span>
                        </div>
                        <span>工信部备案号：{{ site_icp }}</span>
                        <div class="gan">
                            <img src="@/assets/img/gan.png" alt="">
                            <span>{{ site_gwa }}</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="outer">
                <div class="list" v-for="(item, index) in list" :key="index" @click="goPage('/columnIndex', item.id)">
                    <div class="img">
                        <img :src="item.thumb" alt="">
                    </div>
                    <p class="line2"><b>【{{ item.title }}】</b>{{ item.intro }}</p>
                    <div class="bom">
                        <div class="y2">
                            <span>{{ item.user_nickname }}</span>
                        </div>
                        <div class="y2">
                            <i class="iconfont">&#xe61e;</i>
                            <span>{{ item.views }}</span>
                        </div>

                    </div>
                </div>
                <div style="display: flex;justify-content: center;">
                    <el-empty description="没有内容了" v-if="list.length == 0" :image-size="500"></el-empty>

                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pindao: {},
            showpopover: false,
            menuList: [],
            list: [],
            leftList: [],
            text: [],
            temp_title: '',
            site_icp: '',
            site_gwa: '',
            main_logo: '',
            loginInfo: [],
            loading: false,
            totalPage: 1,
            pageNum: 1,

        };
    },
    watch: {
        // 页面切换频道搜索
        id(n) {
            console.log(n)
            this.pageNum = 1
            this.list = []
            this.getList()
        }
    },
    computed: {
        id() {
            return this.$route.query.id ? this.$route.query.id : 0
        }
    },
    created() {
        this.getOption()
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    mounted() {
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
        if (this.id) {
            this.getList()
        }

        this.getData()

    },
    methods: {
        getPinDao(info) {
            this.pindao = info
            this.showpopover = true
        },
        getList() {
            this.loading = true
            let params = {
                page: this.pageNum,
                id: this.id
            }

            this.$api.searchChannel(params).then(res => {
                if (res.data.code == 1) {
                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.loading = false
                }

            })
        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                console.log('触底');

            }
        },
        // 点击跳转外部链接
        gourl(url) {
            if (url) {
                window.open(url, '_blank', 'noopener,noreferrer');
            }
        },
        // 获取后台系统配置
        getOption() {
            let params = {
                type: 'main_logo,temp_title,site_gwa,site_icp,jbly'
            }
            this.$api.getOptions(params).then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    console.log(response);
                    this.temp_title = response.temp_title
                    this.site_icp = response.site_icp
                    this.site_gwa = response.site_gwa
                    this.main_logo = response.main_logo
                }
            })
        },
        goPage(url, id) {
            console.log(id);
            if (id) {
                this.$router.push({
                    path: url,
                    query: {
                        id
                    }
                })
            }
        },
        getData() {
            this.$api.getIndex().then(res => {
                let response
                if (res.data.code == 1) {
                    response = res.data.data
                    this.menuList = response.channel
                    this.slides = response.banner1
                    this.silderTitle = response.banner2
                    this.text = response.text
                    this.leftList = response.left
                    this.zType = [{ id: 0, name: '全部' }, ...response.cate1]
                    this.wType = [{ id: 0, name: '全部' }, ...response.cate2]
                    this.loginInfo = [...response.login]
                }
                console.log(response.cate1.push({
                    id: 0,
                    name: '全部'
                }));
            })
        },
        // 加载更多数据
        load() {
            var page = this.pageNum
            //如果请求未结束就返回不连续请求
            if (this.zloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.ztotalPage) {

                return false;
            }
            page = parseInt(page) + 1
            this.pageNum = page
            this.getList()
        },

    },
}
</script>
<style lang="scss" scoped>
.main-con {
    display: flex;

    .wrap-con {
        width: 15.63rem;
        margin-right: 1.04rem;

        .menu {
            width: 300px;
            background-color: #1068E7;
            padding: 20px;
            box-sizing: border-box;
            height: 640px;
            margin-right: 1.04rem;
            flex-shrink: 0;
            padding-right: 0;

            >div {
                margin-bottom: 1.4rem;

                &:last-child {
                    margin-bottom: 0;
                }

                >p {
                    line-height: 1.25rem;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 1.25rem;
                    color: #FFFFFF;
                    margin-bottom: 0.83rem;
                }

                &:last-child {
                    margin-bottom: 0;
                }

                >div {
                    line-height: 1.6rem;
                    height: 4.8rem;

                    span {
                        cursor: pointer;
                        font-weight: 400;
                        font-size: 0.94rem;
                        color: #FFFFFF;
                        margin-right: 0.08rem;
                        // line-height: 1.33rem;
                    }
                }
            }
        }


        .leftList {
            position: -webkit-sticky;
            position: sticky;
            top: 98px;
            box-sizing: border-box;
            width: 15.63rem;
            margin-top: 1.35rem;

            >span {
                padding: 0 0.9rem;
                font-weight: 400;
                font-size: 1.25rem;
                color: #333333;
                line-height: 2.5rem;
                display: block;
                cursor: pointer;
                background-color: #E7F1FE;

                &:hover {
                    color: #1068E7;
                }

                &:first-child {
                    padding-top: 0.8rem;
                }


            }

            .phoneCode {
                background-color: #E5E5E5;
                margin-top: 1.04rem;
                width: 15.68rem;
                height: 18.65rem;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 1.15rem 0.78rem;

                p {
                    font-weight: bold;
                    font-size: 1.04rem;
                    color: #333333;
                    margin-bottom: 0.8rem;
                }

                >img {
                    width: 6.88rem;
                    height: 6.88rem;
                }

                .links {
                    font-weight: 400;
                    font-size: 0.83rem;
                    color: #333333;
                    text-align: center;
                    margin-top: 1.6rem;
                    margin-bottom: 1.04rem;
                }

                >span {
                    font-weight: 400;
                    font-size: 0.73rem;
                    color: #999999;
                }

                .gan {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 0.5rem;
                    font-weight: 400;
                    font-size: 0.73rem;
                    color: #999999;

                    img {
                        width: 0.94rem;
                        height: auto;
                        margin-right: 0.6rem;
                    }
                }
            }
        }





    }

}

.outer {
    width: 100%;
    padding-bottom: 20px;
}

.list {
    cursor: pointer;
    width: 309px;
    margin-right: 14px;
    margin-bottom: 80px;
    border-radius: 5px;
    overflow: hidden;
    display: inline-block;

    &:nth-child(4n) {
        margin-right: 0;
    }

    .img {
        width: 309px;
        height: 309px;
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #E5E5E5;
        flex-direction: column;
        border-radius: 5px;
        overflow: hidden;

        img {
            width: 309px;
            height: 309px;
            object-fit: cover;
        }

        i {
            font-size: 100px;
            color: #999;
            border: 1px dashed #999;
            margin-bottom: 39px;
        }

        span {
            font-weight: 400;
            font-size: 24px;
            color: #666666;
        }
    }

    >p {
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        margin: 24px 0 20px;
    }

    .bom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .y2 {
            padding: 0 10px;

            >div {
                display: flex;
                align-items: center;
            }

            i {
                font-size: 16px;
                margin-right: 5px;
            }

            span {
                font-size: 14px;
                color: #999;
            }
        }

        .collect {
            font-weight: 400;
            font-size: 16px;
            color: #999999;
        }
    }
}

.titless {
    white-space: nowrap;

}

.erji {
    font-weight: 400;
    font-size: 0.73rem;
    margin-bottom: 0.52;
    width: 40.58rem;
    min-height: 5rem;

    p {
        font-weight: 400;
        font-size: 0.73rem;
        color: #D41F19 !important;
        margin-bottom: 0.52;
    }

    .erji_list {
        display: inline-block;
        font-weight: 400;
        font-size: 0.93rem;
        color: #666666;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;

        span {
            cursor: pointer;

            &:nth-child(2) {
                margin-left: .5rem;
            }
        }
    }
}

/*滚动条样式*/
.infinite-list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0 !important;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 0.0002rem !important;
}

.infinite-list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0.26042rem !important;

    -webkit-box-shadow: inset 0 0 0.26042rem rgba(0, 0, 0, 0.2) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.pdao {
    overflow: hidden;
    // padding-right: 50px;
    width: 100%;
}

.HoverMenu {
    padding: 20px;
    position: absolute;
    left: 300px;
    background-color: #fff;
    z-index: 33333;
    top: 0;
    width: 800px;
    height: 640px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
}

//.infinite-list::-webkit-scrollbar-track {
/*滚动条里面轨道*/
// -webkit-box-shadow: inset 0 0 0.26042rem rgba(0, 0, 0, 0.2) !important;
// border-radius: 0 !important;
// background: rgba(0, 0, 0, 0.1) !important;
//}</style>